<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui.min.js"></script>
    <script src="../js/index.js"></script>
    <script type='text/template' src='Menu.vue'></script>
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/common.css" />
    <script src="../js/axios.min.js"></script>
    <title>注册页面</title>
    <style type="text/css">
        body {
            background: url(../images/login_back.png) no-repeat center center;
			background-size: cover;
			background-attachment: fixed;
        }
		.logo {
			float: left;
			width: 140px;
			height: 140px;
		}
		.title {
			float: left;
			margin-top: 35px;
			margin-left: 19px;
			font-family: PingFangSC-Semibold;57
			font-size: 50px;
			color: #FFFFFF;
			letter-spacing: 0px;
			line-height: 70px;
		}
        .demo-ruleForm {
        	position: relative;
        	overflow: hidden;
			margin: 27px auto 50px;						
            width: 587px;
			height: 635px;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 10px;
        }
        
		.regist_title {
			margin-top: 40px;
			margin-bottom: 23px;
			width: 100%;
			height: 48px;
			text-align: center;
			font-family: PingFangSC-Semibold;
			font-size: 34px;
			color: #323232;
			letter-spacing: 0px;
			line-height: 48px;
			
		}
		.formitem {
			margin-left: 86px;
			/*margin-top: 23px;
			margin-bottom: -10px;*/
			width: 432px;
			height: 50px;
			background: rgba(255,255,255,0.00);
			border: 0px solid #AEAEAE;
			border-radius: 10px;
		}
		.el-form-item {
		    margin-bottom: 19px;
		}
		.regist_btn {
			margin-top: 35px;
			margin-left: 86px;
			width: 432px;
			height: 60px;
			background-image: linear-gradient(90deg, #1D5899 0%, #157DD4 100%);
			border-radius: 10px;
		}
		.regist_btn_text {
			font-family: MicrosoftYaHei;
			font-size: 28.19px;
			color: #FFFFFF ;
			letter-spacing: 0;
		}
		.tologin {
			margin-bottom: 45px;
			margin-right: 71px;
			font-family: PingFangSC-Regular;
			font-size: 16px;
			color: #323232;
			letter-spacing: 0;
			line-height: 22px;
		}
			
    </style>
</head>

<body>
<div id="app" style="min-width: 1100px;">
	<el-row type="flex" justify="center">
		<el-col :span="24" style="margin-top: 85px; text-align: center;">
			<div style="display: inline-block;">
				<img src="../images/loginlogo.png" class="logo">
				<span class="title">中国地震局“互联网+监管”公共服务平台</span>
				<div style="clear: both;"></div>
			</div>
	
		</el-col>
	</el-row>
    <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" class="demo-ruleForm">
        <h3 class="regist_title">注&emsp;册</h3>
        <el-form-item class="formitem " prop="userName">
            <el-input prefix-icon="el-icon-user" v-model.number="registerForm.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item class="formitem" prop="mobile">
            <el-input prefix-icon="el-icon-phone" placeholder="请输入手机号" v-model="registerForm.mobile"></el-input>
        </el-form-item>
        <el-form-item class="formitem"  prop="email">
            <el-input prefix-icon="el-icon-s-promotion" placeholder="请输入邮箱" v-model="registerForm.email"></el-input>
        </el-form-item>
        <el-form-item class="formitem" prop="password">
            <el-input prefix-icon="el-icon-key" placeholder="请输入密码" v-model="registerForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item class="formitem" prop="password2">
            <el-input prefix-icon="el-icon-key" placeholder="请再次输入密码" v-model="registerForm.password2" show-password></el-input>
        </el-form-item>
        <el-form-item>
            <el-button  class="regist_btn" type="primary" @click="submitForm('registerForm')">
            	<span class="regist_btn_text">
            		注&emsp;册
            	</span>
            </el-button>
        </el-form-item>
        <el-form-item style="text-align: right;">
        	<span class="tologin">已有账号，请<a href="login.html">登录</a></span>
        </el-form-item>
    </el-form>
</div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            // 验证手机号是否合法
            let checkMobile = (rule, value, callback) => {
                if (!this.checkTel(value)) {
                    callback(new Error('手机号码不合法'));
                } else {
                    callback();
                }
            }
            // 验证邮箱是否合法
            let checkEmail = (rule, value, callback) => {
                if (!this.isEmail(value)) {
                    callback(new Error('邮箱不合法'));
                } else {
                    callback();
                }
            }
            // 验证二次密码是否相同
            let checkPass2 = (rule, value, callback) => {
                if (value !== this.registerForm.password) {
                    callback(new Error("两次输入密码不一致！"));
                } else {
                    callback();
                }
            }
            return {
                registerForm: {
                    userName: "",
                    mobile: "",
                    email: "",
                    password: "",
                    password2: "",
                },
                rules: {
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },
                        {
                            min: 2,
                            max: 50,
                            message: '长度在 2 到 50个字符',
                            trigger: 'blur'
                        }
                    ],
                    mobile: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                        {
                            validator: checkMobile,
                            trigger: 'blur'
                        }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    },
                        {
                            validator: checkEmail,
                            trigger: 'blur'
                        }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                        {
                            min: 6,
                            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,30}$/,
                            message: '密码为数字,小写字母,大写字母,特殊符号至少包含三种,长度为6 - 30位',
                            trigger: 'blur'
                        }
                    ],
                    password2: [{
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur'
                    },
                        {
                            min: 6,
                            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,30}$/,
                            message: '密码为数字,小写字母,大写字母,特殊符号至少包含三种,长度为6 - 30位',
                            trigger: 'blur'
                        },
                        {
                            validator: checkPass2,
                            trigger: 'blur'
                        }
                    ],
                }
            }
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            url: '/user/register',
                            data: {
                                userName: this.registerForm.userName,
                                mobile: this.registerForm.mobile,
                                email: this.registerForm.email,
                                password: this.registerForm.password,
                            }
                        })
                            .then(response => {
                                let data = response.data;
                                if (data.code == 200) {
                                    location.href = "./login.html";
                                } else {
                                    this.$message.error(data.msg);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        console.log("register error!!");
                        return false;
                    }
                });
            },
            // 验证字符串是否为手机号
            checkTel(str) {
                let re = /^1\d{10}$/
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 验证字符串是否为邮箱
            isEmail(str) {
                let re = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            }
        }

    })
</script>

</html>